<template>
  <div>
    <div v-for="(item, index) in colList" :key="index" class="EColEditor-item" v-show="flase">
      <Number
        v-model:value="item.componentProps.span"
        v-model="item.componentProps.span"
        style="width: 100%"
        :min="1"
        :max="24"
      />
      <div v-if="colList.length > 1" class="del-btn">
        <span @click="handleDelete(index)">
          <EIcon name="icon-shanchu1" />
        </span>
      </div>
    </div>
    <div class="add-btn" @click="handleAdd" v-show="false"> 添加 </div>
    <Select :default-value="colList.length" @change="handleChangeCol">
      <SelectOption :value="2">2列</SelectOption>
      <SelectOption :value="4">4列</SelectOption>
      <SelectOption :value="6">6列</SelectOption>
      <SelectOption :value="8">8列</SelectOption>
    </Select>
  </div>
</template>
<script lang="ts" setup>
  import { pluginManager, getUUID } from '/@/views/formDesigner/utils';
  import { NodeItem } from '../../types/epic-designer';
  import { computed, PropType } from 'vue';
  import { Select } from 'ant-design-vue';
  import EIcon from '../../components/icon';

  const SelectOption = Select.Option;
  const Number = pluginManager.getComponent('number');
  const props = defineProps({
    modelValue: {
      type: Array as PropType<NodeItem[]>,
      default: () => [],
    },
  });

  const emit = defineEmits(['update:modelValue']);
  const colList = computed({
    get() {
      return props.modelValue;
    },
    set(e) {
      emit('update:modelValue', e);
    },
  });

  /**
   * 新增栅格Col
   */
  function handleAdd() {
    const colItem = {
      type: 'col',
      children: [],
      componentProps: {
        span: 12,
      },
      id: getUUID(),
    };
    colList.value.push(colItem);
  }

  /**
   * 删除栅格Col
   * @param index
   */
  function handleDelete(index: number) {
    colList.value = colList.value.filter((item, i) => index !== i);
  }

  const handleChangeCol = (val) => {
    let len = colList.value.length;
    console.log('handleChangeCol val', val, 'len', len);
    if (len < val) {
      for (let i = 0; i < val - len; i++) {
        const colItem = {
          type: 'col',
          children: [],
          componentProps: {
            span: 24 / val,
          },
          id: getUUID(),
        };
        colList.value.push(colItem);
      }
    } else {
      colList.value = colList.value.filter((item, i) => i < val);
    }

    // colList.value = colList.value.map((item) => {
    //   item.componentProps.span = 24 / val;
    //   return item;
    // });
    colList.value.forEach((item) => {
      item.componentProps.span = 24 / val;
    });
  };
</script>
